<template>
	<view class="order-manage-item">
		<view class="order-num">
			<view class="id"> 订单编号：{{orderInfo.order_sn}} </view>
			<view class="status" :class="orderInfo.status == 6? '': 'a-status'"> {{statusName}} </view>
		</view>
		<view class="goods-list">
			<GoodsItem :goodsInfo="item" v-for="item in orderInfo.item" />
		</view>
		<view class="order-info">
			<view class="item">
				<view class="label"> 配送费 </view>
				<view class="value"> ￥{{orderInfo.delivery_money}} </view>
			</view>
			<view class="item">
				<view class="label"> 共计{{orderInfo.order_num}}件商品 </view>
				<view class="value"> 实付：￥{{orderInfo.pay_amount}} </view>
			</view>
			<view class="item">
				<view class="label"> 下单时间 </view>
				<view class="value"> {{orderInfo.create_time}} </view>
			</view>
			<view class="item">
				<view class="label"> 下单客户 </view>
				<view class="value"> {{orderInfo.addressee_name}} </view>
			</view>
		</view>
		<view class="btn-box">
			<view class="btn" v-if="(orderInfo.status==5||orderInfo.status==6)&&orderInfo.is_member_comment==0" @tap="goEvaUser(orderInfo.id)"> 评价用户 </view>
			<view class="btn" v-if="orderInfo.status==6" @tap="viewEva(orderInfo.id)"> 查看评价 </view>
			<view class="btn" @tap="goOrderDetails(orderInfo.id)"> 订单详情 </view>
			<view class="btn confirm" v-if="orderInfo.status == 7" @tap="openModal(1)"> 确认退款 </view>
			<view class="btn confirm" v-if="orderInfo.status == 4" @tap="openModal(2)"> 确认送达 </view>
		</view>
		<Modal ref="modalRef" :tips="tips" @confirm="confirm"/>
	</view>
</template>

<script setup>
	import { computed, ref } from 'vue'
	import Modal from '@/components/ConfirmDialog.vue'
	import GoodsItem from '@/components/OneGoodsItem.vue'
	import { ConfirmSendApi, ConfirmRefundApi } from '@/service/shop.js'
	const props = defineProps(['orderInfo', 'index'])
	const emit = defineEmits(['refund', 'send'])
	const modalRef = ref()
	const tips = ref()
	const funcType = ref()
	const statusName = computed(() => {
		// -1已取消 0:待付款,1:待发货/待接单/待核销(已付款), 4:已发货/已接单(配送中),5:待评价,6:已完成 7:退款申请中 8:退款成功
		 let name = ''
		switch(props.orderInfo.status) {
			case 0:
				name = '待付款'
				break;
			case 1:
				if(props.orderInfo.shipments == 1) {
					name = '待接单'
				} else {
					name = '待提货'
				}
				break;
			case 3:
				name = '已接单'
				break;
			case 4:
				name = '配送中'
				break;
			case 5:
				name = '待评价'
				break;
			case 6:
				name = '已完成'
				break;
			case 7:
				name = '退款中'
				break;
			case 8:
				name = '已退款'
				break;
		}
		return name
	})
	const goOrderDetails = (id) => {
		uni.navigateTo({
			url: `/pages/shopPages/orderManage/orderDetails?id=${id}`
		})
	}
  const viewEva = (id) => {
    uni.navigateTo({
      url: `/pages/shopPages/orderManage/viewEva/viewEva?order_id=${id}`
    })
  }
	const openModal = (type) => {
		funcType.value = type
		if(type ==1) {
			tips.value = '你确定要退款吗？'
		} else {
			tips.value = '你确定要操作吗？'
		}
		modalRef.value.open()
	}
	const confirm = () => {
		if(funcType.value ==1) {
			confirmRefund()
		} else {
			confirmSend()
		}
	}
	// 确认退款
	const confirmRefund = () => {
		const params = {
			order_id: props.orderInfo.id,
			refund_id: props.orderInfo.refund.id
		}
		ConfirmRefundApi(params).then(res => {
			console.log(res);
			modalRef.value.close()
			getApp().globalData.toast('退款成功')
			emit('refund', props.index)
		})
	}
	// 确认送达
	const confirmSend = (order_id) => {
		ConfirmSendApi({order_id:props.orderInfo.id}).then(res => {
			modalRef.value.close()
			getApp().globalData.toast('操作成功')
			emit('send', props.index)
		})
	}
	const goEvaUser = (id) => {
		uni.navigateTo({
			url: `/pages/riderPages/evaUser/evaUser?order_id=${id}&type=shop`
		})
	}
</script>

<style scoped lang="scss">
	.order-manage-item {
		padding: 15px 10px;
		border-radius: 10px;
		margin-bottom: 10px;
		background-color: #fff;
		box-sizing: border-box;
		.order-num {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 12px;
			.id {
				font-weight: 400;
				font-size: 14px;
				color: #999999;
				line-height: 21px;
			}
			.status {
				color: #999999;
				font-size: 14px;
				font-weight: 400;
				line-height: 16px;
				&.a-status {
					color: #FF3B1E;
				}
			}
		}
		.goods-list {
			border-bottom: 1px solid #eeeeee;
		}
		.order-info {
			padding-bottom: 8px;
			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 12px;
				.label {
					color: #666666;
					font-size: 14px;
					font-weight: 400;
					line-height: 19px;
				}
				.value {
					color: #333333;
					font-size: 14px;
					font-weight: 400;
					line-height: 17px;
				}
			}
		}
		.btn-box {
			display: flex;
			justify-content: end;
			.btn {
				width: 80px;
				height: 32px;
				color: #333333;
				font-size: 14px;
				line-height: 32px;
				text-align: center;
				background: #FFFFFF;
				border-radius: 151px;
				border: 1px solid #999999;
				margin-left: 10px;
			}
			.confirm {
				border: none;
				color: #FFFFFF;
				background-color: #FF3B1E;
			}
		}
	}
</style>